<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/element-plus/index.css">
    <style>

        .el-select {
            width: 100%;
        }
    </style>
</head>
<body>

<div id="app">
    <el-row>

        <el-breadcrumb separator="/">
            <el-breadcrumb-item>主页</el-breadcrumb-item>
            <el-breadcrumb-item>档案管理</el-breadcrumb-item>
            <el-breadcrumb-item>员工信息</el-breadcrumb-item>
        </el-breadcrumb>

    </el-row>
    <el-row>
        <el-col :span="24">
            <el-form label-width="80px">
                <!--   一行是24格         -->
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="员工姓名">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="员工部门">
                            <el-select v-model="query.dept.id">
                                <el-option v-for="dept in depts"
                                           :value="dept.id" :label="dept.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>


                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="职务">
                            <el-select></el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="在职状态">
                            <el-select></el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="success" @click="btnQueryClick">搜索</el-button>
                    </el-col>

                </el-row>

            </el-form>
        </el-col>


    </el-row>
    <el-row>

        <el-button-group>
            <el-button type="success" @click="btnInClick">入职</el-button>
            <el-button type="primary">转职</el-button>
            <el-button type="danger">离职</el-button>
            <el-button type="info">导入</el-button>
            <el-button type="warning">导出</el-button>
        </el-button-group>

        <el-table :data="employees.filter(emp=>emp.status.id==1)" stripe border>
            <el-table-column prop="name" label="员工姓名"></el-table-column>
            <el-table-column prop="dept.name" label="员工部门"></el-table-column>
            <el-table-column prop="job.name" label="员工职位"></el-table-column>
            <el-table-column prop="status.name" label="在职状态"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary"
                               @click="btnEditClick(scope.row)">转职
                    </el-button>
                    <el-button type="danger"
                               @click="btnQuitClick(scope.row)">离职</el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-row>


    <el-dialog v-model="info.isShow">
        <template #title>{{ info.title }}</template>
        <el-form label-width="80px">
            <el-form-item label="员工姓名">
                <el-input type="text" v-model="info.employee.name"/>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="info.employee.dept.id">
                    <el-option v-for="dept in depts"
                               :value="dept.id" :label="dept.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职务">
                <el-select v-model="info.employee.job.id">
                    <el-option v-for="job in jobs"
                               :value="job.id" :label="job.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="btnSubmitClick">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script src="../lib/mock.js"></script>
<script src="../mock/employees.js"></script>
<script src="../lib/vue.global.js"></script>
<script src="../lib/element-plus/index.full.js"></script>
<script>

    depts.unshift({
        id: -1,
        name: '全部部门'
    })

    jobs.unshift({
        id: -1,
        name: '全部职务'
    })

    Vue.createApp({

        data: function () {
            return {
                employees: employees.list,
                depts: depts,
                jobs: jobs,
                query: {
                    dept: { // 搜索区上当前选中的部门
                        id: -1
                    }
                }, info: { // 和模态窗体对应
                    isShow: false,
                    title: '员工入职',
                    employee: {
                        id: -1,
                        name: '',
                        dept: {
                            id: -1
                        }, job: {
                            id: -1
                        },
                        status: {
                            id: 1,
                            name: '在职'
                        }
                    }
                }
            }
        }, methods: {
            btnQueryClick: function () {
                if (this.query.dept.id != -1) {
                    this.employees =
                        this.employees
                            .filter(emp => emp.dept.id == this.query.dept.id) //箭头函数
                    //function(emp){return emp.dept.id == this.query.dept.id}
                }
            },
            btnInClick: function () {
                this.info.employee = {
                    id: -1,
                    name: '',
                    dept: {
                        id: -1
                    }, job: {
                        id: -1
                    },
                    status: {
                        id: 1,
                        name: '在职'
                    }
                }
                this.info.isShow = true;
            },
            btnSubmitClick: function () {


                this.info.employee.dept =
                    depts.find(dept => dept.id == this.info.employee.dept.id);
                this.info.employee.job =
                    jobs.find(job => job.id == this.info.employee.job.id);
                if (this.info.employee.id == -1) {
                    this.employees.push(this.info.employee);
                } else {

                    var current =
                        this.employees.find(emp => emp.id == this.info.employee.id);
                    current = this.info.employee;
                }

                this.info.isShow = false;
            },
            btnEditClick: function (emp) {
                this.info.isShow = true;
                this.info.title = '员工转职';
                this.info.employee = emp;
            },
            btnQuitClick: function (row) {
                if (confirm('是否对当前员工进行离职操作？')) {

                    this.employees
                        .find(emp => emp.id == row.id).status = {
                        id: 2,
                        name: '离职'
                    }

                }
            }
        }
    })
        .use(ElementPlus) //中间件
        .mount('#app')

</script>
</html>